<template>
    <div>
        <content-head>
            <div class="project-head">
                <div class="left">
                    <div class="project-round">
                        <span></span>
                    </div>
                    <div class="project-detail">
                        <p>工作台</p>
                        <p>将正在进行的项目添加到工作台中以提高工作效率。</p>
                    </div>
                </div>
            </div>
        </content-head>
        <div class="project-content">
            <project-detail v-for="item in projectList" :key="item.id" :project="item" :searchFlag="0"></project-detail>
        </div>
        <div class="project-plus">
            <Icon type="plus-circled"  class="plus-icon" @click="editProject"></Icon>
        </div>
    </div>
</template>

<script>
    import ProjectDetail from './project/projectDetail';
    import ContentHead from './project/contentHead';
    export default {
        data(){
            return {
                param : {
                    collection: {
                        filters: [
                            {
                                field: 'flag',
                                operator: 'EQ',
                                value: '1'
                            }
                        ]
                    },
                    orders: [
                        {
                            fieldName: 'createdAt',
                            orderType: 'DESC'
                        }
                    ],
                    pageParms: {
                        pageIndex: 0,
                        pageSize: 10
                    }
                },
                projectList:[],
                flag: 0
            };
        },
        components:{
            ProjectDetail,
            ContentHead
        },
        methods:{
            editProject(){
                this.$router.push('/main/new');
            }
        },
        created(){
            this.$http.post('/codegen/api/v1/projects', this.param).then((response) => {
                if (response.status === 200 && response.data.data) {
                    this.projectList = response.data.data;
                }
            });
        }
    };
</script>

<style lang="scss" scoped>
    .project-content {
        width: 1024px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    .project-plus{
        position: fixed;
        right: 32px;
        bottom: 32px;

        .plus-icon{
            font-size: 42px;
            color: #2d8cf0;
            cursor: pointer;
            &:hover{
                color: #57a3f3;
            }
        }
    }
</style>